<script setup lang="ts">
import type {MessageItemType} from "@/types/componentsType";

import {getCurrentTime, generateRandomString} from '@/utils'
// @ts-ignore
import {globalVariable} from "@/store";


const router = useRouter()

defineOptions({
  name: "TalkContainer"
})

const info: MessageItemType[] = []

// 生成数据
for (let i = 0; i < 20; i++) {
  info.push({
    time: getCurrentTime(),
    title: `测试${i}`,
    message_info: `${generateRandomString(10 * i)}`,
    message_uid: Math.floor((Math.random() + 1) * 10000)
  })
}

const messageClickProxy = (e: MouseEvent) => {
  changeStyle(e.target as HTMLElement)
}

const changeStyle = (element: HTMLElement) => {
  const parent = element.parentElement
  if (parent) {
    parent.classList.add('active')
    const changeListParent = parent.parentElement
    if (changeListParent) {
      const changeList = changeListParent.querySelectorAll('.message-item')

      if (changeList && changeList.length) {
        changeList.forEach(item => {
          if (item !== parent) {
            item.classList.remove('active')
          }
        })
      }
    }
  }
}

// 双击显示消息面板
const clickItem: (id: number | string) => void = (id) => {
  console.log(id, 'id')
  router.push({
    name: "msg_window", params: {
      msg_uid: id
    }
  })
}

// 添加数据
const useGolbalVaribal = globalVariable()
const setDate: (item: MessageItemType) => void = (item) => {
  useGolbalVaribal.messageInfo = item

  // console.log(useGolbalVaribal.messageInfo)
}

</script>

<template>
  <div class="message-box">
    <ElScrollbar height="calc(100vh - 25px)" @click="messageClickProxy" class="left-content">
      <!--      -->
      <MessageItem v-for="item in info" :title="item.title" :message_info="item.message_info"
                   :message_uid="item.message_uid" :key="item.title" @click="clickItem(item.message_uid)"
                   @contextmenu="setDate(item)"/>
    </ElScrollbar>
    <div class="right-content">
      <router-view/>
    </div>
  </div>

</template>

<style scoped lang="scss">


.message-box {
  box-sizing: border-box;
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: start;

  :deep(.left-content) {
    width: 30%;
    box-sizing: border-box;
    background-color: rgb(27, 27, 27);
  }

  .right-content {
    flex: 1;
    height: 100%;
  }
}
</style>